<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>s05-Class 与 Style 绑定</title>
		<script src="https://cdn.jsdelivr.net/npm/vue@2.7.7/dist/vue.js"></script>
	</head>
	<body>
		<div id='app1' class="static" v-bind:class="{active: isActive, 'text-danger': hasError}">
			{{ isActive ? 'active' : '' }}, 
			{{ hasError ? 'text-danger' : '' }}
		</div>
		<hr />
		<div id='app2' v-bind:class="classObject">
			{{ classObject.active ? 'active' : '' }}, 
			{{ classObject.textDanger ? 'textDanger' : '' }}
		</div>
		<hr />
		<div id='app3' v-bind:class="classObject">
			{{ classObject.active ? 'active' : '' }}, 
			{{ classObject.textDanger ? 'text-danger' : '' }}
		</div>
		<hr />
		<div id='app4' v-bind:class="[activeClass, errorClass]">
			{{ activeClass }}, 
			{{ errorClass }}
		</div>
		<hr />
		<div id='app5' v-bind:class="[isActive ? activeClass : '', errorClass]">
			{{ activeClass }}, 
			{{ errorClass }}
		</div>
		<hr />
		<div id='app6' v-bind:class="[{activeClass : isActive}, errorClass]">
			{{ activeClass }}, 
			{{ errorClass }}
		</div>
		<hr />
		<div id='app7'>
			<my-component class="baz boo"></my-component>
		</div>
		<hr />
		<div id='app8'>
			<!-- 注意：这里必须使用 “v-bind:class” 才能绑定 Vue 实例中的 property！
			使用普通的 “class” attribute 是无法读取 Vue 实例中的 “isActive” property的！
			 -->
			<my-component v-bind:class="{active: isActive}"></my-component>
		</div>
		<hr />
		<div id="app9" v-bind:style="{color: activeColor, fontSize: fontSize + 'px'}">
			对象语法1
		</div>
		<!-- 直接绑定到一个样式对象通常更好，这会让模板更清晰 -->
		<div id="app10" :style="styleObject">
			对象语法2
		</div>
		<div id="app11" :style="[baseStyles, overridingStyles]">
			数组语法1
		</div>
		<!-- 2.4 多重值：从 2.3.0 起你可以为 style 绑定中的 property 提供一个包含多个值的数组，常用于提供多个带前缀的值 -->
		<!--   这样写只会渲染数组中最后一个被浏览器支持的值。在本例中，如果浏览器支持不带浏览器前缀的 flexbox，那么就只会渲染 display: flex -->
		<div id="app12" :style="{display: ['-webkit-box', '-ms-flexbox', 'flex']}"></div>
		
		
		<hr />
		<hr />
		<hr />
		<hr />
		<hr />
		<script type="text/javascript">
			// 1 绑定 HTML Class
			//   1.1 对象语法
			var ap1 = new Vue({
				el: '#app1',
				data: {
					isActive: true,
					hasError: false
				}
			})
			
			//   绑定的数据对象不必内联定义在模板里：
			var ap2 = new Vue({
				el: '#app2',
				data: {
					classObject: {
						active: true,
						'textDanger': false
					}
				}
			})
			
			//   我们也可以在这里绑定一个返回对象的计算属性
			var ap3 = new Vue({
				el: '#app3',
				data: {
					isActive: false,
					error: null
				},
				computed: {
					classObject: function() {
						return {
							active: this.isActive && !this.error,
							'text-danger': this.error && this.error.type === 'fatal'
						}
					}
				}
			})
			//   1.2 数组语法
			var ap4 = new Vue({
				el: '#app4',
				data: {
				  activeClass: 'active',
				  errorClass: 'text-danger'
				}
			})
			var ap5 = new Vue({
				el: '#app5',
				data: {
					isActive: true,
					activeClass: 'active',
					errorClass: 'text-danger'
				}
			})
			//     1.2.1 在数组语法中也可以使用对象语法
			var ap6 = new Vue({
				el: '#app6',
				data: {
					isActive: true,
					activeClass: 'active',
					errorClass: 'text-danger'
				}
			})
			//   1.3 用在组件上
			Vue.component('my-component', {
			  template: '<p class="foo bar">Hi</p>'
			})
			
			// 注意：必须先定义组件，再定义使用到该组件的 Vue 实例！
			var ap7 = new Vue({
				el: '#app7'
			})
			
			//     当 isActive 为 truthy[1] 时，HTML 将被渲染成为：<p class="foo bar active">Hi</p>
			var ap8 = new Vue({
				el: '#app8',
				data: {
					isActive: -1
				}
			})
			
			// 2 绑定内联样式
			//   2.1 对象语法
			new Vue({
				el: '#app9',
				data: {
					activeColor: 'red',
					fontSize: 30
				}
			})
			new Vue({
				el: '#app10',
				data: {
					styleObject: {
						color: 'blue',
						fontSize: '30px'
					}
				}
			})
			//   2.3 数组语法：可以将多个样式对象应用到同一个元素上
			new Vue({
				el: '#app11',
				data: {
					baseStyles: {color: 'cyan'},
					overridingStyles: {fontSize: '20px'}
				}
			})
			//   2.3 自动添加前缀
			//   2.4 多重值：从 2.3.0 起你可以为 style 绑定中的 property 提供一个包含多个值的数组，常用于提供多个带前缀的值
			//     这样写只会渲染数组中最后一个被浏览器支持的值。在本例中，如果浏览器支持不带浏览器前缀的 flexbox，那么就只会渲染 display: flex
			new Vue({
				el: '#app12'
			})
			
			
			
		</script>
	</body>
</html>
